<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <!-- <link rel="stylesheet/less" href="./css/common.less">
    <link rel="stylesheet/less" href="./css/style.less"> -->
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <header class="header">
        <div class="logo">
            <div class="circular"></div>
            <div class="square"></div>
            <p class="yourLogo">Your Logo</p>
        </div>
        <ul class="nav">
            <li class="navlist">Home</li>
            <li class="navlist">Portfolio</li>
            <li class="navlist">About</li>
            <li class="navlist">Contact</li>
            <li class="btn">
                <div>Blog</div>
            </li>
        </ul>
        <div class="search">
            <p class="searchtext">Search</p>
            <img src="./images/search.png">
        </div>
    </header>

    <div class="banner">
        <h1>Good Design Is Good Business</h1>
        <div class="text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultricies sagittis magnaa commodo. </p>
            <p>Ut eget eros mauris, ut cursus urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.
            </p>
        </div>
        <div class="more">
            LEARN MORE
        </div>
        <url class="spot">
            <li></li>
            <li></li>
            <li></li>
            <li class="active"></li>
            <li></li>
        </url>
    </div>

    <div class="services">
        &nbsp;
        <div class="our">OUR SERVICES</div>

        <ul class="servicelist">
            <li>
                <img src="./images/service1.png">
                <h3>Web Design</h3>
                <p>
                    Lorem ipsum dolor sit amet,
                    consectetur adipiscing elit.
                    Mauris nec ipsum at lacus
                    commodo suscipit.
                    <span>Details...</span>
                </p>
            </li>
            <li>
                <img src="./images/service1.png">
                <h3>Web Design</h3>
                <p>
                    Lorem ipsum dolor sit amet,
                    consectetur adipiscing elit.
                    Mauris nec ipsum at lacus
                    commodo suscipit.
                    <span>Details...</span>
                </p>
            </li>
            <li>
                <img src="./images/service1.png">
                <h3>Web Design</h3>
                <p>
                    Lorem ipsum dolor sit amet,
                    consectetur adipiscing elit.
                    Mauris nec ipsum at lacus
                    commodo suscipit.
                    <span>Details...</span>
                </p>
            </li>
            <li>
                <img src="./images/service1.png">
                <h3>Web Design</h3>
                <p>
                    Lorem ipsum dolor sit amet,
                    consectetur adipiscing elit.
                    Mauris nec ipsum at lacus
                    commodo suscipit.
                    <span>Details...</span>
                </p>
            </li>
        </ul>
    </div>

    <div class="Portfolio">
        <div class="morework">
            <p>Our Portfolio Awesome</p>
            <div class="btn">More Work</div>
        </div>
        <ul class="Photo">
            <li>
                <img src="./images/photo1.png">
                <h3>Lorem Ipsum Dolar Sit Amet</h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Mauris nec ipsum at lacus commodo suscipit.
                </p>
            </li>
            <li>
                <img src="./images/photo1.png">
                <h3>Lorem Ipsum</h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscinglit.
                </p>
            </li>
            <li>
                <img src="./images/photo2.png">
                <h3>Ipsum Amet Dolar Sit </h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing
                    elitmauris nec ipsum at lacus commodo suscipit.
                </p>
            </li>
        </ul>
    </div>

    <div class="offer">
        <h1>WHAT WE OFFER</h1>
        <p class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultricies sagittis magnaa commodo. Ut eget eros
            mauris, ut cursus urna.
            Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.
        </p>
        <ul>
            <li>
                <h3>Web Design</h3>
                <p>
                    Lorem ipsum dolor sit amet, consect
                    etur adipiscing elit. Ut ultricies sagit
                    tism agnaa commodo. Ut eget eros mauris, ut cursus urna vestibuluman ipsum primis in faucibus orci
                    luctuset.<span></span>
                </p>
                <div class="btn">
                    <div>Details</div>
                </div>
            </li>
            <li>
                <h3>Search Optimization</h3>
                <p>
                    Lorem ipsum dolor sit amet, consect
                    etur adipiscing elit. Ut ultricies sagit
                    tism agnaa commodo. Ut eget eros mauris, ut cursus urna vestibuluman ipsum primis in
                    faucibus<span>Details...</span>
                </p>
            </li>
            <li>
                <h3>Web Design</h3>
                <p>
                    Lorem ipsum dolor sit amet, consect
                    etur adipiscing elit. Ut ultricies sagit
                    tism agnaa commodo. Ut eget eros mauris, ut cursus urna vestibuluman ipsum primis in faucibus orci
                    luctuset.<span></span>
                </p>
                <div class="btn btnshadow">Details</div>
            </li>
            <li>
                <h3>Web Design</h3>
                <p>
                    Lorem ipsum dolor sit amet, consect
                    etur adipiscing elit. Ut ultricies sagit
                    tism agnaa commodo. Ut eget eros mauris, ut cursus urna vestibuluman ipsum primis in faucibus orci
                    luctuset.<span>>>></span>
                </p>
            </li>
        </ul>
        <h2>Testimonials</h2>
        <p class="introduce">
            “Lorem ipsum dolor sit amet, consectetur adipiscing elit mauris necip
            at lacus commodo suscipit praesent sollicitudin enim vel mirhon”
        </p>
        <div class="portrait">
            <p><span>Jon Doe</span> / CEO of LoremIpsum</p>
            <ul>
                <li>
                    <img src="./images/portrait1.png">
                    <img src="./images/portrait3.png">
                </li>
                <li>
                    <img src="./images/portrait2.png">
                    <img src="./images/portrait4.png">
                </li>
                <li>
                    <img src="./images/portrait1.png">
                    <img src="./images/portrait3.png">
                </li>
            </ul>
        </div>
    </div>

    <footer class="footer">
        &nbsp;
        <ul>
            <li>
                <h3>Twitter FEEDs</h3>
                <p>Check out this great theme item</p>
                <a href="#">http://tadjalskfj.com</a>
                <p>2 weeks ago</p>
                <hr>
                <p>Check out this great theme item for</p>
                <a href="#">http://tadjalskfj.com</a>
                <p>2 weeks ago</p>
                <hr>
                <p>Check out this great theme item for you</p>
                <a href="#">http://tadjalskfj.com</a>
                <p>2 weeks ago</p>
            </li>
            <li>
                <h3>NEWSLETTER</h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adip
                </p>
                <p>
                    iscing elit. Ut ultricies sagittis magna a comm.
                </p>
                <p>
                    Ut eget eros mauris, ut cursus urna.
                </p>
                <hr>
                <p class="email">Your Email Address</p>
                <input type="text">
                <div class="btn">
                    <div>Sign Up</div>
                </div>
            </li>
            <li>
                <h3>Recent Porjects</h3>
                <div>
                    <div class="box"></div>
                    <div>
                        <p>Sketchy Business Card</p>
                        <a href="#">http://tadjalskfj.com</a>
                        <p>2 weeks ago</p>
                    </div>
                </div>
                <hr>
                <div>
                    <div class="box"></div>
                    <div>
                        <p>Sketchy Business Card</p>
                        <a href="#">http://tadjalskfj.com</a>
                        <p>2 weeks ago</p>
                    </div>
                </div>
                <hr>
                <div>
                    <div class="box"></div>
                    <div>
                        <p>Sketchy Business Card</p>
                        <a href="#">http://tadjalskfj.com</a>
                        <p>2 weeks ago</p>
                    </div>
                </div>
            </li>
            <li>
                <h3>Contact</h3>
                <div class="Telephone">
                    <div class="image">
                        <img src="./images/Telephone.png">
                    </div>
                    <div>
                        <p>1-000-000-0000</p>
                        <p>1-000-000-0000</p>
                    </div>
                </div>
                <div class="information">
                    <div class="image">
                        <img src="./images/information.png">
                    </div>
                    <div>
                        <p>1-000-000-0000</p>
                        <p>1-000-000-0000</p>
                    </div>
                </div>
                <div class="envelope">
                    <div class="image">
                        <img src="./images/envelope.png">
                    </div>
                    <div>
                        <p>abcdefg@hijs.dfh</p>
                        <p>fjashfaf@jkfs.ckd</p>
                    </div>
                </div>
            </li>
        </ul>
    </footer>
</body>
<script src="./js/less.min.js"></script>

</html>